<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分类管理</title>
    <link rel="stylesheet" href="/css/index.css" type="text/css">
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/index.js"></script>
</head>
<body>
    <div id="div1" style="width: 100%;height: 500px">
        <div style="width: 20%;height: 500px;float: left">
            <el-tree :data="MenuTree"
                     :props="defaultProps"
                     @node-click="handleNodeClick"
                     :expand-on-click-node = false
                     >
        </el-tree>
        </div>
        <div style="float: left;width: 80%;height: 500px">
            <span>
                <el-button type="warning" icon="el-icon-circle-plus" @click="clear">新增下级分类</el-button>
                <el-button type="danger" icon="el-icon-delete-solid" @click="deleteMenu">删除该分类</el-button>
            </span><br><br>
            <span>*分类编号：<el-input v-model="menu.mnumber" style="width: 200px;height: 60px"></el-input></span><br>
            <span>*分类名称：<el-input v-model="menu.mname" style="width: 200px;height: 60px"></el-input></span><br>
            <span>*添加人&nbsp&nbsp&nbsp：<el-input v-model="menu.user.username" style="width: 200px;height: 60px"></el-input></span><br>
            <span>*分类介绍：<el-input
                    type="text"
                    v-model="menu.mintroduction"
                    maxlength="100"
                    show-word-limit
            ></el-input>
            </span><br>
            <span >
                 <el-button type="primary" @click="save">保存并应用</el-button>
            </span>
        </div>


        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
            <el-form :model="menu">
                <el-form-item label="*分类编号" :label-width="formLabelWidth">
                    <el-input v-model="menu.mnumber" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="*分类名称" :label-width="formLabelWidth">
                    <el-input v-model="menu.mname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="*分类名称" :label-width="formLabelWidth">
                    <el-select v-model="menu.userId" placeholder="请选择">
                        <el-option
                                v-for="item in user"
                                :key="item.id"
                                :label="item.username"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="*分类介绍" :label-width="formLabelWidth">
                    <el-input v-model="menu.mintroduction" autocomplete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="add">确 定</el-button>
            </div>
        </el-dialog>
    </div>
<script>
    new Vue({
        el: "#div1",
        data(){
            return{
                number:"",
                name:"",
                people:"",
                text:"",
                id:"",
                user:[],
                MenuTree: null,
                formLabelWidth: '120px',
                dialogFormVisible:false,
                defaultProps: {
                    children: 'treeMenu',
                    label: 'mname'
                },
                menu:{id:"",pid:"",mname:"",userId:"",mnumber:"",mintroduction:"",companyId:"",murl:"",user:""}
            }
        },
        methods:{
            listWithTree(){
                axios.get("/menu").then(res=>{
                    this.MenuTree =  res.data;
                    this.MenuTree.forEach(menu=>{
                        menu.treeMenu.forEach(men=>{
                            men["treeMenu"]=men.treeMenuOther;
                        })
                    })
                })
            },
            handleNodeClick(data) {
                console.log(data);
                this.menu = data;
                this.id = this.menu.id;
            },
            clear(){
                this.menu={id:"",pid:"",mname:"",userId:"",mnumber:"",mintroduction:"",companyId:"",murl:"",user:""};
                this.dialogFormVisible = true;
            },
            add(){
                let ep = JSON.parse(JSON.stringify(this.menu));
                ep.pid = this.id;
                console.log(ep);
                ep.user = null;
                axios.post("/menu",ep).then(res=>{
                    if(res.data == "ok"){
                        this.listWithTree();
                        this.$message("添加成功");
                        this.dialogFormVisible = false;
                    }
                })
            },
            save(){
                let ep = JSON.parse(JSON.stringify(this.menu));
                console.log(ep);
                axios.put("/menu",ep).then(res=>{
                    if(res.data =="ok"){
                        this.listWithTree();
                        this.$message("更新成功");
                    }
                })
            },
            deleteMenu(){
                console.log(this.id);
                axios.delete("/menu/"+this.id).then(res=>{
                    if (res.data=="ok"){
                        this.listWithTree();
                        this.$message("删除成功");
                    }
                })
            },
            selectAllUser(){
                axios.get("/findAllUsers").then(res=>{

                    this.user=  res.data;
                })
            }

        },
        mounted(){
            this.listWithTree();
            this.selectAllUser();
        }
    })
</script>

</body>
</html>